<!-- 数据为空的占位组件 -->

<template>
  <!-- 多一个容器，并设置border是为了解决margin-top的塌陷问题 -->
  <view class="page-empty-wrapper">
    <view class="container" :style="{ marginTop: marginTop + 'rpx' }" @click="$emit('refresh')">
      <view class="img-box flex-column-center-end">
        <image class="img" :src="emptyImage" :style="imgStyle"></image>
      </view>
      <view class="flex-row-center empty-text" :style="emptyTextStyle">
        <text>{{ emptyText }}</text>
      </view>
      <view class="flex-row-center empty-subtext" :style="emptySubTextStyle" v-show="!!emptySubText">
        <text>{{ emptySubText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'pageEmpty',
  // 页面刷新函数：数据为空的时候，点击空白区域，触发页面刷新
  emits: ['refresh'],
  props: {
    // 距离上面的padding
    marginTop: {
      type: Number,
      default: 200,
    },
    // 空白区域文案
    emptyText: {
      type: String,
      default: '数据为空',
    },
    emptySubText: {
      type: String,
      default: '',
    },
    // 空白区域文案
    emptyTextStyle: {
      type: String,
      default: 'color: #fff',
    },
    emptySubTextStyle: {
      type: String,
      default: 'color: rgba(255,255,255,0.5)',
    },
    // 空白区域图片
    emptyImage: {
      type: String,
      default: 'https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/95b0cfbaa19d7c973f746394ff924e2e.png',
    },
    imgStyle: {
      type: String,
      default: 'width: 100%;height: 560rpx;',
    },
  },
  onLoad() {},
  onShow() {},
};
</script>

<style lang="scss" scoped>
.page-empty-wrapper {
  border: 1rpx solid transparent;
  box-sizing: border-box;
}
.container {
  width: 100%;
  // height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .img-box {
    width: 100%;
    height: 560rpx;
    .img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 560rpx;
    }
  }
}
.empty-text {
  width: 100%;
  text-align: center;
  font-size: 31rpx;
  // color: #fff;
  line-height: 62rpx;
}
.empty-subtext {
  width: 100%;
  text-align: center;
  font-size: 27rpx;
  line-height: 38rpx;
}
</style>
